<template>
  <div class="patient-reported-right">
    <div class="header">
      <div class="left" @click="open">
        <span
          >{{ table ? table.tableName : '' }}<span class="subtitle">{{ subtitle }}</span></span
        >
      </div>
      <div class="right" @click="onclick"></div>
    </div>
    <div class="form">
      <template v-if="priority && priority.length > 0">
        <right-priority />
      </template>

      <template v-else>
        <right-analysis v-if="mode == 0" />

        <template v-else-if="source && table">
          <right-form v-if="mode == 1" :source="source" :original="original" />
          <right-list v-else-if="mode == 2" :source="source" @upload="upload" />
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
import RightForm from './components/form'
import RightList from './components/list'
import RightAnalysis from './components/analysis'
import RightPriority from './components/priority'
import { cloneDeep } from 'lodash-es'

export default {
  data() {
    return {
      source: null,
      original: null,
      version: 0,
      sourceList: [],
      list: null,
    }
  },
  components: { RightForm, RightList, RightAnalysis, RightPriority },
  computed: {
    ...mapState({
      mode: state => state.treatment.mode,
      subjectInfo: state => state.treatment.subjectInfo,
      visit: state => state.treatment.visit,
      table: state => state.treatment.table,
      priority: state => state.treatment.priority,
    }),
    ...mapGetters({
      findRole: 'treatment/findRole',
    }),
    subtitle: function () {
      if (this.table&&this.table.extandStatus&&this.table.extandStatus.isLapse) {
        switch (this.table.extandStatus.isLapse) {
          case 2:
            return '本页已标注为“已失效”'
        }
      } else {
        return ''
      }
    },
  },
  watch: {
    table: {
      handler: function (val) {
        ++this.version
        this.source = null
        this.original = null
        if (val) {
          this.findSubjectData(this.version)
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    ...mapActions('eCRFDetail', ['getSubjectData', 'getEmbeddedTable', 'subjectVisitTables']),
    ...mapMutations({
      clear: 'treatment/clear',
      setSource: 'treatment/setSource',
    }),

    findSubjectData(version) {
      const { id, databaseId, databaseVersion } = this.subjectInfo
      const data = {
        projectId: localStorage.getItem('sys-project-id'),
        databaseId,
        databaseVersion,
        subjectId: id,
        subjectTable: this.table.id,
      }
      this.getSubjectData({ data }).then(res => {
        if (version === this.version) {
          const { code, data } = res
          if (code === 200) {
            this.source = data;
            this.original = JSON.parse(JSON.stringify(data));
          }
        }
      }).catch(error => {
          this.$message.error(error)
        })
    },

    upload () {
      this.findSubjectVisitTables()
    },

    // 获取访视列表数据
    findSubjectVisitTables() {
      const { id, databaseVersion } = this.subjectInfo
      const params = {
        subjectId: id,
        databaseVersion: databaseVersion,
        subjectVisitId: this.visit.id,
      }
      this.subjectVisitTables({ params })
        .then(res => {
          const { code, data } = res
          if (code === 200) {
            // this.tableList = data
              if (data && data.length > 0) {
                let table
                console.log('1234',this.table,this.visit,data)
                if (Reflect.has(this.query, 'subjectTableId')) {
                  table = data.filter(item => item.id == this.query.subjectTableId)[0]
                  this.setTable(table)
                  this.findSubjectData(this.version)
                }
              }
          }
        })
        .catch(error => {
          this.tableList.length = 0
          this.$message.error(error)
        })
        .finally(() => {})
    },

    onclick: function () {
      this.clear()
      this.$router.go(-1)
    },
    open: function (e) {
      let flag
      const classList = e.currentTarget.classList
      if (classList.contains('active')) {
        flag = true
        classList.remove('active')
      } else {
        flag = false
        classList.add('active')
      }
      this.$emit('callback', flag)
    },
  },
}
</script>

<style lang="scss" scoped>
.patient-reported-right {
  display: flex;
  flex-flow: column nowrap;

  > .header {
    flex: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.8rem 0 1rem;
    border-bottom: 1px #ebeef5 solid;

    > div {
      background-repeat: no-repeat;
    }

    > .left {
      width: 50rem;
      text-align: left;
      font-size: 1rem;
      font-weight: 700;
      padding-left: 2.2rem;
      background-size: 0.85rem 0.7rem;
      background-position: 0.1rem 0.4rem;
      background-image: url('../../../../assets/img/left.png');
      cursor: pointer;
    }

    > .left.active {
      background-image: url('../../../../assets/img/right.png');
    }

    .subtitle {
      font-size: 0.875rem;
      margin-left: 0.625rem;
      color: #f56c6c;
    }
  }

  > .right {
    width: 1rem;
    height: 2rem;
    background-size: 1rem 0.85rem;
    background-position: 0rem 0.5rem;
    background-image: url('../../../../assets/img/back.png');
  }
}

> .form {
  flex: 800;
}
</style>
